<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
    <head>
        <meta charset="UTF-8">
        <title>用户管理</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="shortcut icon" type="image/x-icon" th:href="@{/favicon.ico}"/>
        <link rel="stylesheet" th:href="@{/css/font.css}">
        <link rel="stylesheet" th:href="@{/css/xadmin.css}">
        <script type="text/javascript" th:src="@{/lib/jquery/jquery.min.js}"></script>
        <script charset="utf-8" th:src="@{/lib/layui/layui.js}"></script>
        <script type="text/javascript"  th:src="@{/js/xadmin.js}"></script>
        <link rel="stylesheet" th:href="@{/css/animate.min.css}">
    </head>

    <body class="animated fadeIn">
        <div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="#">首页</a>
                <a href="#">权限管理</a>
                <a>
                  <cite>用户管理</cite>
                </a>
            </span>
            <a class="layui-icon layui-icon-refresh"
               style="float:right"
               href="javascript:location.replace(location.href);" title="刷新"></a>
        </div>

        <div class="x-body">
            <table class="layui-hide" id="user-table"></table>
        </div>

        <script type="text/html" id="toolbar">
            <shiro:hasPermission name="user:add">
                <a class="layui-btn layui-btn-xs layui-btn-blue" lay-event="add">新增</a>
            </shiro:hasPermission>
        </script>

        <script type="text/html" id="column-toolbar">
            <shiro:hasPermission name="user:update">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            </shiro:hasPermission>
            <shiro:hasPermission name="user:reset">
                <a class="layui-btn layui-btn-xs" lay-event="reset">重置密码</a>
            </shiro:hasPermission>
            <shiro:hasPermission name="user:delete">
                <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
            </shiro:hasPermission>
        </script>



        <script type="text/html" id="statusTpl">
            <!-- 不能禁用自己 -->
            {{#  if('<shiro:principal property="username"/>' == d.username) { }}
                <input type="checkbox" disabled name="status" value="{{d.userId}}" lay-skin="switch" lay-text="正常|锁定" lay-filter="status" {{ d.status == '1' ? 'checked' : '' }}>
            {{#  } }}

            {{#  if('<shiro:principal property="username"/>' !== d.username) { }}
            <input type="checkbox" name="status" value="{{d.userId}}" lay-skin="switch" lay-text="正常|锁定" lay-filter="status" {{ d.status == '1' ? 'checked' : '' }}>
            {{#  } }}
        </script>

        <script>
            layui.use(['table', 'element', 'laydate', 'form'], function () {
                var table = layui.table;
                var $ = layui.$;
                var form = layui.form;

                var tableIns =table.render({
                    elem: '#user-table'
                    , url: '/user/list'
                    , page: true
                    , toolbar: '#toolbar'
                    , cols: [
                        [
                            {field: 'userId', title: 'ID', width: "10%"}
                            , {field: 'username', title: '用户名', width: "15%"}
                            , {field: 'deptName', title: '部门', width: "10%"}
                            , {field: 'email', title: '邮箱', width: "20%"}
                            , {field: 'lastLoginTime', title: '最后登陆时间', width: "15%"}
                            , {field: 'status', title: '状态', templet: "#statusTpl", width: "15%"}
                            , {title: '操作', fixed: 'right', align: 'center', toolbar: '#column-toolbar'}
                        ]
                    ]
                });

                // 账号状态(正常/锁定)点击事件
                form.on('switch(status)', function(data){
                    if (data.elem.checked) {
                        $.post('/user/' + data.value + '/enable', function (data) {
                            handlerResult(data, enableDone);
                        });
                    } else {
                        $.post('/user/' + data.value +'/disable', function (data) {
                            handlerResult(data, disableDone);
                        });
                    }
                });

                // 工具条点击事件
                table.on('toolbar', function (obj) {
                    var data = obj.data;
                    var event = obj.event;

                    if (event === 'add') {
                        add();
                    }
                });

                // 行点击事件 重置密码
                table.on('tool', function (obj) {
                    var data = obj.data;
                    var event = obj.event;
                    if (event === 'edit') {
                        edit(data.userId);
                    } else if (event === 'reset') {
                        layer.open({
                            content: '/user/' + data.userId + "/reset",
                            title: "重置密码",
                            area: ['500px', '200px'],
                            type: 2,
                            maxmin: true,
                            shadeClose: true,
                            end: function () {
                                $(".layui-laypage-btn")[0].click()
                            }
                        });
                    } else if (event === 'del') {
                        del(obj);
                    }
                });

                function disableDone(data) {
                    parent.layer.msg("禁用成功", {icon: 6});
                }

                function enableDone(data) {
                    parent.layer.msg("激活成功", {icon: 6});
                }

                function add() {
                    layer.open({
                        content: "/user",
                        title: "新增用户",
                        area: ['500px', '550px'],
                        type: 2,
                        maxmin: true,
                        shadeClose: true,
                        end: function () {
                            $(".layui-laypage-btn")[0].click()
                        }
                    });
                }

                function del(obj) {
                    layer.confirm("确定删除用户吗?", {icon: 3, title: '提示'},
                        function (index) {//确定回调
                            var id = obj.data.userId;
                            $.post('/user/' + id, {_method: "DELETE"}, function (data) {
                                layer.close(index);
                                handlerResult(data, deleteDone);
                            });
                        }, function (index) {//取消回调
                            layer.close(index);
                        }
                    );
                }

                function deleteDone(data) {
                    parent.layer.msg("删除成功", {icon: 6});
                    table.reload('user-table');
                }

                function edit(id) {
                    layer.open({
                        content: '/user/' + id,
                        title: "编辑",
                        area: ['600px', '700px'],
                        type: 2,
                        maxmin: true,
                        shadeClose: true,
                        end: function () {
                            table.reload('user-table');
                        }
                    });
                }
            });
        </script>
    </body>

</html>